<template>
  <div class="myuser">
    <!-- <span>我的信息</span> -->
    <my-box>
      <!-- 标题 -->
      <template v-slot:title>
        <span style=" margin-left: 7px !important;">我的信息</span>
      </template>

      <template v-slot:mydiv class="mydiv">
        <div>
          <router-link to="/myinfo">
            <van-icon class="el-icon-user" color="#39A9ED" size="0.6rem" />
            <li>个人信息</li>
          </router-link>
        </div>

        <div>
          <router-link to="/myUpdateHeader">
            <van-icon class="el-icon-picture-outline" color="#39A9ED" size="0.6rem" />
            <li>修改头像</li>
          </router-link>
        </div>
        <!-- 修改信息 -->
        <div>
          <router-link to="/myUpdate">
            <van-icon name="setting-o" color="#39A9ED" size="0.6rem" />
            <li>修改信息</li>
          </router-link>
        </div>
        <!-- 修改密码 -->
        <div>
          <router-link to="/myUpdatePassword">
            <van-icon class="el-icon-unlock" color="#39A9ED" size="0.6rem" />
            <li>修改密码</li>
          </router-link>
        </div>
        <!-- 退出登录 -->
        <div>
          <div @click="quit">
            <van-icon class="el-icon-thumb" color="#39A9ED" size="0.6rem" />
            <li>退出登录</li>
          </div>
        </div>
      </template>
    </my-box>
  </div>
</template>

<script scoped>
import myBox from './myBox.vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    let router = useRouter()
    return { router }
  },

  data() {
    return {}
  },

  methods: {
    quit() {
      this.router.push('/login')
      localStorage.clear()
    },
  },

  components: {
    myBox,
  },
}
</script>

<style >
.mydiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.mydiv > div {
  width: 25%;
  text-align: center;
  padding: 3px 0 3px 0;
  box-sizing: border-box;
  margin-bottom: 4px;
}
.mydiv li {
  font-size: 12px;
  color: #000000;
}
</style>
